<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <title>Bblog认证中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="/images/icons/favicon.ico"/>
    <link rel="stylesheet" href="/fonts/ali/iconfont.css">
    <link rel="stylesheet" type="text/css" href="/css/login.css">
    <link rel="stylesheet" href="/plugins/layer/theme/default/layer.css"/>
    <style>
        .iconfont {
            color: #adadad;
            position: absolute;
            left: 10px;
            top: 34px;
            font-size: 16px;
        }
    </style>
</head>

<body>

<div class="limiter">
    <div class="container-login100" style="background-image: url('/images/bg-01.jpg');">
        <div class="wrap-login100">
            <form class="login100-form validate-form" action="/oauth2/authorize" method="post">
                <span class="login100-form-title p-b-49">认证中心</span>

                <div class="wrap-input100 validate-input m-b-23">
                    <span class="label-input100">用户名</span>
                    <input required="required" class="input100" type="text" name="username" placeholder="请输入用户名">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                    <span class="iconfont">&#xe705;</span>
                </div>

                <div class="wrap-input100 validate-input">
                    <span class="label-input100">密码</span>
                    <input required="required" class="input100" type="password" name="password" placeholder="请输入密码">
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                    <span class="iconfont">&#xe627;</span>
                </div>

                <div class="container-login100-form-btn">
                    <div class="error_text">
                        <a th:if="${param.error != null}" >
                            用户名或密码错误
                        </a>
                    </div>
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <button type="submit" class="login100-form-btn">
                            登录
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="/plugins/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/plugins/layer/layer.js"></script>
<script>
    var login = {
        data: {
            username: "",
            password: ""
        },
        init: function () {
            login.bindEvent();
        },
        bindEvent: function () {
            $(".login100-form-btn").on("click", function () {
                if (login.validate()) {
                    login.submit();
                }
            });
        },
        validate: function () {
            login.data.username = $("input[name='username']").val();
            login.data.password = $("input[name='password']").val();
            if (!login.data.username) {
                $("input[name='username']").focus();
                layer.msg("请输入用户名", {
                    icon: 2
                });
                return false;
            }
            if (!login.data.username) {
                $("input[name='password']").focus();
                layer.msg("请输入密码", {
                    icon: 2
                });
                return false;
            }
            return true;
        },
        submit: function () {
            $.ajax({
                url: "/oauth2/authorize",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: login.data,
                beforeSend: function (xhr) {
                    layer.load();
                },
                success: function (result, status, xhr) {
                    layer.closeAll('loading');
                },
                error: function (xhr, textStatus, errorThrown) {
                    layer.closeAll('loading');
                    layer.msg("请求异常", {
                        icon: 5
                    });
                }
            });
        }
    };
    $(function () {
        //login.init();
    });
</script>
</body>

</html>
